<template>

  <div>
    <div class="margin-container-list">
      <div class="tab-style-default">
        <el-tabs v-model="delivery.deliveryStatus" @tab-click="statusClick">
          <el-tab-pane :label="labels['待配送']" name="10"> </el-tab-pane>
          <el-tab-pane :label="labels['待签收']" name="20"> </el-tab-pane>
          <el-tab-pane :label="labels['已签收']" name="30"> </el-tab-pane>
          <el-tab-pane :label="labels['全部']" name="-1"></el-tab-pane>
        </el-tabs>
      </div>
      <!--顶部搜索 -->
      <div class="top-operate">
        <div>
          <div>
            <el-select class="select-class" v-model="delivery.textCol">
              <el-option label="配送单号" value="deliveryNo"></el-option>
              <el-option label="团长昵称" value="memberNickname"></el-option>
              <el-option label="团长姓名" value="memberRealName"></el-option>
              <el-option label="团长手机号" value="memberPhone"></el-option>
              <el-option label="商品名称" value="goodsTitle"></el-option>
              <el-option label="配送地址" value="deliveryAddress"></el-option>
            </el-select>
            <el-input style="width: 200px;" v-model="delivery.textValue" placeholder="请输入内容"></el-input>
            <el-select class="select-class" v-model="delivery.timeCol">
              <el-option label="生成时间" value="createTime"></el-option>
              <el-option label="配送发货时间" value="deliveryTime"></el-option>
              <el-option label="团长签收时间" value="receiveTime"></el-option>
            </el-select>
            <el-date-picker
              v-model="delivery.timeValue"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </div>
          <div class="pad-t-10"><el-button @click="exportExcel">导出</el-button></div>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table  ref="multipleTable" :data="deliveryList" v-loading="listLoading" @selection-change="handleSelectionChange" element-loading-text="加载中" style="width: 100%" >
          <el-table-column width="50px" type="selection"></el-table-column>
          <el-table-column width="240px" label="配送单号" prop="deliveryNo"/>
          <el-table-column width="240px" label="团长">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p">
                <label><img :src="scope.row.memberAvatar" class="user-avatar"></label>
                <div class="font-14 pad-l-10">
                  <div><span class="font-gray">昵称：</span>{{scope.row.memberNickname}}</div>
                  <div v-if="scope.row.memberRealName">
                    <span class="font-gray">姓名：</span>{{scope.row.memberRealName}}
                  </div>
                  <div v-if="scope.row.memberPhone">
                    <span class="font-gray">手机：</span>{{scope.row.memberPhone}}
                  </div>
                  <div v-if="scope.row.memberPhone">
                    <span class="font-gray">编号：</span>{{scope.row.commanderCode}}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="240px" label="配送地址" prop="deliveryAddress" />
          <el-table-column width="240px" label="生成时间" prop="createTime" />
          <el-table-column width="240px" label="配送状态">
            <template slot-scope="scope">
              <template>
                <b>{{ dict.deliveryStatus[scope.row.deliveryStatus]}}</b>
              </template>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="配送/签收时间" prop="enterpriseAmount">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p">
                <div class="font-14 pad-l-10">
                  <div>
                    <span class="font-gray">配送时间：</span><div v-if="scope.row.deliveryTime">{{scope.row.deliveryTime}}</div>
                  </div>
                  <div>
                    <span class="font-gray">签收时间：</span><div v-if="scope.row.receiveTime">{{scope.row.receiveTime}}</div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="商品数量" prop="goodsNum" />
          <el-table-column width="140px" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="exportDeliveryDetail(scope.row)">导出</el-button>
              <el-button type="text" size="medium" @click="showDetail(scope.row)">查看详情</el-button>
              <el-button type="text" size="medium" v-if="scope.row.deliveryStatus == 10" @click="updateDeliveryStatus(scope.row)">确认配送</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="searchListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .select-class {
    margin-right: -5px;
    width: 110px;
  }
  .mini-pic {
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
  .user-avatar {
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
</style>

<script>
  import { pageDelivery, statDelivery, updateDeliveryStatus } from '@/api/goods/delivery'
  import { downloadFile } from '@/api/common/common'
  import elDragDialog from '@/directive/el-dragDialog'

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        multipleSelection: [],
        total: 0,
        listLoading: true,
        searchListQuery: {},
        defaultQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10
        },
        delivery: {
          deliveryStatus: '10',
          timeCol: 'createTime',
          timeValue: [],
          textCol: 'deliveryNo',
          textValue: ''
        },
        dict: {
        },
        deliveryList: [],
        labels: {
          '待配送': '待配送(0)',
          '待签收': '待签收(0)',
          '已签收': '已签收(0)',
          '全部': '全部(0)'
        }
      }
    },
    // 初始化页面
    created() {
      this.searchListQuery = { ...this.defaultQuery }
      this.init()
    },
    filters: {
      dateFilter(e) {
        return e
      }
    },
    mounted() {
    },
    methods: {
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.init()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.init()
      },
      setSearchListQuery() {
        // 搜索状态
        const currentPage = this.searchListQuery.currentPage
        const size = this.searchListQuery.size
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.page = currentPage
        this.searchListQuery.size = size
        this.searchListQuery.deliveryStatus = this.delivery.deliveryStatus === '-1' ? '' : this.delivery.deliveryStatus
        this.searchListQuery.dateColumn = this.delivery.timeCol
        this.searchListQuery.startDate = (this.delivery.timeValue && this.delivery.timeValue.length > 0) ? this.delivery.timeValue[0] : ''
        this.searchListQuery.endDate = (this.delivery.timeValue && this.delivery.timeValue.length > 1) ? this.delivery.timeValue[1] : ''
        this.searchListQuery[this.delivery.textCol] = this.delivery.textValue
      },
      init() {
        this.setSearchListQuery()
        statDelivery({ 'enterpriseId': this.getEnterpriseId() }).then(response => {
          if (response.isError) return
          this.labels['待配送'] = '待配送(' + response.data['待配送'] + ')'
          this.labels['待签收'] = '待签收(' + response.data['待签收'] + ')'
          this.labels['已签收'] = '已签收(' + response.data['已签收'] + ')'
          this.labels['全部'] = '全部(' + response.data['全部'] + ')'
        })
        pageDelivery(this.searchListQuery).then(response => {
          if (response.isError) {
            return
          }
          this.total = response.data.total
          this.deliveryList = response.data.records
          this.dict = response.data.dict
          this.listLoading = false
        })
      },
      statusClick() {
        this.init()
      },
      exportDeliveryDetail(row) {
        const name = row.createTime.substring(0, 10) + '-' + row.memberRealName + '-配送单.xlsx'
        downloadFile('/goods/delivery/exportDeliveryDetail', row, name)
      },
      showDetail(row) {
        this.$router.push({ path: '/order/delivery/detail/index', query: row })
      },
      updateDeliveryStatus(row) {
        this.$confirm('是否确认已配送？', '操作确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateDeliveryStatus({
            enterpriseId: this.getEnterpriseId(),
            deliveryId: row.deliveryId,
            deliveryStatus: 20
          }).then(response => {
            if (response.isError) return
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.init()
          })
        })
      },
      exportExcel() {
        if (this.multipleSelection.length > 0) {
          const deliveryIds = this.multipleSelection.map(item => item.deliveryId)
          downloadFile('/goods/delivery/exportDelivery', { enterpriseId: this.getEnterpriseId(), deliveryIds: deliveryIds.join(',') }, '配送订单.xlsx')
        } else {
          this.setSearchListQuery()
          downloadFile('/goods/delivery/exportDelivery', this.searchListQuery, '配送订单.xlsx')
        }
      },
      handleSearch() {
        this.init()
      }
    }
  }

</script>
